<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/eidt.css">
    <link rel="stylesheet" href="./editor.md/css/editormd.min.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="./images/logo_003.jpg" alt="">
        <div class="content">
            <span>我的博客系统</span>
            <div class="opts">
                <a href="./blog_list.html">主页</a>
                <a href="./blog_eidt.html">写博客</a>
                <a href="./blog_login.html">注销</a>
            </div>

        </div>
    </div>
    <!-- 正文部分 -->
    <div class="edit-container">
        <!-- 博客标题部分 -->
        <div class="title-container">
            <input type="text" id="title">
            <input type="button" id="submit" value="提交">
        </div>
        <!-- 博客正文部分 -->
        <div class="content-container">
            <!-- 创建一个div，起一个id -->
            <div id="blog_edit">
                <!-- 在div中添加一个文本域，编辑器会自动将用户输入的内容设置到这个文本域。
                    文本域本身就是一个表单标签，可以同.val()的形式拿到当中的值 -->
                <textarea id="text_edit_content" style="display: none;"></textarea>         
                <!--display: none表示让这个标签隐藏  -->
            </div>
        </div>
        
    </div>
</body>
<!-- 先引入jQuery -->
<script src="./js/jquery-3.6.3.min.js"></script>
<!-- 再引入编辑器插件 -->
<script src="./editor.md/editormd.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>
<!-- 初始化编辑器 -->
<script type="text/javascript">
    $(function() {
        var editor = editormd("blog_edit", {
            width  : "100%",
            height : "100%",
            // theme : "dark",
            // previewTheme : "dark",
            // editorTheme : "pastel-on-dark",
            codeFold : true,
            //syncScrolling : false,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            searchReplace : true,
            //watch : false,                    // 关闭实时预览
            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
            // toolbar  : false,             //关闭工具栏
            // previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji : true,
            taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                     // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,               // 开启流程图支持，默认关闭
            sequenceDiagram : true,         // 开启时序/序列图支持，默认关闭,
            placeholder : '开始创作...',     // 占位符
            path   : "./editor.md/lib/"
        });
    });

    // 绑定按钮的点击事件
    $('#submit').click(function(){
        // alert(123); 测试按钮是否绑定成功
        //(1)获取用户输入并提交数据
        let titleEl = $('#title');
        let contentEl = $('#text_edit_content');
        // 判断输入的标题和内容是否为空
        if(!titleEl.val()){
            alert('请输入文章标题');            
            return;
        }
        if(!contentEl.val()){
            alert('请输入内容');            
            return;
        }                
        //(2)构造发送的数据
        let postData = {
            title : titleEl.val(),
            content : contentEl.val()
        }
        //(3)提交请求
        $.ajax({
            type : 'post',
            url : 'blog',
            contentType :'application/x-www-form-urlencoded',
            data : postData,
            //回调函数
            success : function(respData){
                //发送成功,则跳转到blog_list.html页面
                if(respData.code == 0){
                    location.assign('blog_list.html');
                }else{
                    alert(respData.message);
                }
            },
            error : function(){
                console.log('访问出现错误！');
            },
            statusCode : {
                403 : function(){
                    //未登录，没有权限访问。强制跳转到登录界面
                    location.assign('blog_login.html');
                }
            }
        })
    })   
</script>
</html>